<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="/src/css/swiper-bundle.min.css" />
    <link rel="stylesheet" href="/src/css/swiper/animate.min.css" />
  </head>

  <body>
    <style>
      p {
        margin: 0;
      }

      img {
        display: block;
      }

      html,
      body {
        width: 100%;
        height: 100%;
        margin: 0;
      }

      .img-cover {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }

      .mobile,
      .swiper {
        width: 100%;
        height: 100%;
        /* background-color: khaki; */
      }

      /* 第一页样式 */
      .page1-img1 {
        height: 50%;
      }

      .page1-text1 {
        position: absolute;
        right: 10px;
        top: 50px;
        color: fff;
        font-size: 16px;
        display: flex;
      }

      .page1-text1 p {
        width: 20px;
        padding: 0px 5px;
        text-shadow: 0 0 2px 0;
      }

      .page1-img2 {
        height: 30%;
        width: 90%;
        margin: 0px auto;
        /* background-color: skyblue; */
      }

      .page1-text2 {
        width: 100%;
        text-align: center;
      }

      .page1-text2 p {
        line-height: 35px;
        font-size: 18px;
      }

      /* 第二页样式 */
      .page2-img1 {
        height: 60%;
      }

      .page2-img2 img {
        width: 100%;
      }

      .page2-text1 {
        background-color: skyblue;
        padding: 10px;
        font-size: 14px;
        color: fff;
        line-height: 25px;
        margin-top: 3%;
      }

      .page2-text2 {
        font-size: 14px;
        text-align: center;
        line-height: 55px;
      }

      /* 第三页 */
      .page3-img1 {
        height: 70%;
      }

      .page3-img2 {
        width: 60%;
        /* background-color: khaki; */
        position: absolute;
        right: 20px;
        top: 0;
      }

      .page3-img2 img {
        transform: rotate(10deg) translateY(-15%);
      }

      .page3-img3 {
        box-sizing: border-box;
        width: 40%;
        border: 1px solid ddd;
        padding: 5px;
        position: absolute;
        top: 63%;
        background-color: fff;
      }

      .page3-img3 img {
        width: 100%;
      }

      .page3-text1 {
        box-sizing: border-box;
        width: 60%;
        position: absolute;
        top: 70%;
        right: 0;
        padding: 20px;
        font-size: 16px;
        line-height: 30px;
      }

      /* 第四页样式 */
      .page4-img1 {
        height: 60%;
      }

      .page4-text1 {
        display: flex;
        margin-top: 50px;
      }

      .page4-text1 p {
        font-size: 16px;
        width: 18px;
        margin: 0px 10px;
      }

      .page4-img2 {
        width: 60%;
        height: 45%;
        position: absolute;
        right: 0;
        bottom: 0;
        border: 1px solid ddd;
        padding: 5px;
        background-color: fff;
      }
    </style>
    <script src="/src/js/swiper-bundle.min.js"></script>
    <script src="/src/js/swiper.animate1.0.3.min.js"></script>
    <div class="mobile">
      <div class="swiper">
        <div class="swiper-wrapper">
          <!-- 第一页 -->
          <div class="swiper-slide">
            <div
              class="page1-img1 ani"
              swiper-animate-effect="bounceInDown"
              swiper-animate-duration="1s"
            >
              <img src="/src/img/template-04/01-1.webp" class="img-cover" />
            </div>

            <div
              class="page1-text1 ani"
              swiper-animate-effect="bounceInRight"
              swiper-animate-duration="1s"
              swiper-animate-delay="0.5s"
            >
              <p>遇见你</p>

              <p>是最美丽的意外</p>
            </div>

            <div
              class="page1-img2 ani"
              swiper-animate-effect="zoomIn"
              swiper-animate-duration="1s"
              swiper-animate-delay="0.5s"
            >
              <img src="/src/img/template-04/01-2.webp" class="img-cover" />
            </div>

            <div
              class="page1-text2 ani"
              swiper-animate-effect="fadeInUp"
              swiper-animate-duration="1s"
              swiper-animate-delay="1s"
            >
              <p>天淡银河垂地，相思无计回避</p>

              <p>纵然千山万里，寄我心中情语</p>
            </div>
          </div>

          <!-- 第二页 -->
          <div class="swiper-slide">
            <div
              class="page2-img1 ani"
              swiper-animate-effect="zoomIn"
              swiper-animate-duration="1s"
            >
              <img src="/src/img/template-04/02-1.webp" class="img-cover" />
            </div>

            <div
              class="page2-img2 ani"
              swiper-animate-effect="fadeInUp"
              swiper-animate-duration="1s"
              swiper-animate-delay="0.3s"
            >
              <img src="/src/img/template-04/02-2.jpg" />
            </div>

            <div
              class="page2-text1 ani"
              swiper-animate-effect="lightSpeedIn"
              swiper-animate-duration="1s"
              swiper-animate-delay="0.5s"
            >
              <p>
                依然能清晰记得，和你初次见面的场景我真的有点小小的紧张。
                我和你的初次见面，还是在别人的引荐下见的。
              </p>
            </div>

            <div
              class="page2-text2 ani"
              swiper-animate-effect="flipInY"
              swiper-animate-duration="1s"
              swiper-animate-delay="1s"
            >
              Your gentle smile，drive away the haze in my heart
            </div>
          </div>

          <div class="swiper-slide">
            <div
              class="page3-img1 ani"
              swiper-animate-effect="fadeInDown"
              swiper-animate-duration=".5s"
            >
              <img src="/src/img/template-04/03-2.webp" class="img-cover" />
            </div>

            <div
              class="page3-img2 ani"
              swiper-animate-effect="zoomIn"
              swiper-animate-duration="1s"
              swiper-animate-delay="0.3s"
            >
              <img src="/src/img/template-04/03-1.webp" class="img-cover" />
            </div>

            <div
              class="page3-img3 ani"
              swiper-animate-effect="rotateIn"
              swiper-animate-duration="1s"
              swiper-animate-delay="0.3s"
            >
              <img src="/src/img/template-04/03-3.webp" />
            </div>

            <div
              class="page3-text1 ani"
              swiper-animate-effect="fadeInUp"
              swiper-animate-duration="1s"
              swiper-animate-delay="0.3s"
            >
              我把思念告诉风，它轻轻吹过，带着温柔;我把思念告诉了水，流水潺潺，那份清甜你可还记得？我用整个真心，思念你。
            </div>
          </div>

          <!-- 第四页 -->
          <div class="swiper-slide">
            <div
              class="page4-img1 ani"
              swiper-animate-effect="fadeInDown"
              swiper-animate-duration="1s"
            >
              <img src="/src/img/template-04/04-1.webp" class="img-cover" />
            </div>

            <div
              class="page4-text1 ani"
              swiper-animate-effect="fadeInUp"
              swiper-animate-duration="1s"
              swiper-animate-delay="0.3s"
            >
              <p>山无陵</p>

              <p>天地合</p>

              <p>乃敢与君绝！</p>
            </div>

            <div
              class="page4-img2 ani"
              swiper-animate-effect="fadeInRight"
              swiper-animate-duration="1s"
              swiper-animate-delay="0.3s"
            >
              <img src="/src/img/template-04/04-3.webp" class="img-cover" />
            </div>
          </div>
        </div>

        <!-- 如果需要分页器 -->
        <div class="swiper-pagination"></div>
      </div>
    </div>

    <script>
      var mySwiper = new Swiper('.swiper', {
        direction: 'vertical', // 垂直切换选项
        loop: true, // 循环模式选项
        // initialSlide: 3,

        // 如果需要分页器
        pagination: {
          el: '.swiper-pagination'
        },
        on: {
          init: function () {
            swiperAnimateCache(this) //隐藏动画元素
            swiperAnimate(this) //初始化完成开始动画
          },
          slideChangeTransitionEnd: function () {
            swiperAnimate(this) //每个slide切换结束时也运行当前slide动画
            //this.slides.eq(this.activeIndex).find('.ani').removeClass('ani'); 动画只展现一次，去除ani类名
          }
        }
      })
    </script>
  </body>
</html>
